
import { NextPage } from "next";
import React, { useContext, useEffect } from "react";
import Countdown from "react-countdown";
import Card from "../components/Card/Card";

import  { VotingContext} from "../context/Voter"
import Style from "../styles/index.module.css";

const Home: NextPage = () => {
    const {
        getNewCandidate,
        candidateArray,
        giveVote,
        checkIfWalletIsConnected,
        candidateLength,
        getAllVoterData,
        currentAccount,
        voterLength,
    } = useContext(VotingContext);

    // 当切换以太坊账户时，currentAccount发生变化会自动触发useEffect里面的函数

    useEffect(() => {
        getNewCandidate();
        getAllVoterData();
    }, [currentAccount])

    return (
        <div className={Style.home}>
            {currentAccount && (
                <div className={Style.winner}>
                    <div className={Style.winner_info}>
                        <div className={Style.candidate_list}>
                            <p>
                                No Candidate:<span>{candidateLength}</span>
                            </p>
                        </div>
                        <div className={Style.candidate_list}>
                            <p>
                                No Voter:<span>{voterLength}</span>
                            </p>
                        </div>
                    </div>
                    <div className={Style.winner_message}>
                        <small>
                            <Countdown date={Date.now() + 1000000000} />
                        </small>
                    </div>
                </div>
            )}
            <Card candidateArray={candidateArray} giveVote={giveVote} />

        </div>
    );
};
export default Home;